<!--
 * @Descripttion:  确认方案
 * @version:
 * @Author: lehaixia
 * @Date: 2023-02-06 17:07:21
 * @LastEditors: lehaixia
 * @LastEditTime: 2023-02-07 15:14:20
-->
<template>
  <div class="page-has-bottom bg_gray">
    <ComHeader title="确认方案" bg-color="#FAFBFE" @get-height="handleHeadHeight" />
    <div class="cus-fixed-bottom">
      <van-button type="primary" block round class="cus-btn-submit" @click="handleSubmit">保存</van-button>
    </div>
    <van-form :show-error-message="false" @submit="handleSubmit">
      <div class="f-group">
        <div class="custom-form">
          <div class="c-cell">
            <van-field name="checkbox" label="套餐销售" input-align="right">
              <template #input>
                <van-checkbox v-model="formData.isPackage" shape="square" checked-color="#16BC83" :disabled="setMaleDisable" @change="handleChangeSetMeal" />
              </template>
            </van-field>
          </div>
          <div v-if="formData.isPackage">
            <Cell
              v-model="formData.setmealSaleAmount"
              title="套餐总价"
              placeholder="请输入套餐总价"
              required
              :rules="formRules.setmealSaleAmount"
              :right="false"
              is-input
              maxlength="8"
              input-align="right"
              type="digit"
              :disabled="isHaveSetmealSaleAmount"
            />

            <div class="category-title">品类选择</div>
            <div class="category-select">
              <LabelSelect
                v-model="setMealCategoryIdsList"
                :option-data="checkData"
                label-name="optyCategoryType"
                value-name="optyCategoryId"
                multiple
                :excludes="singleItemCategoryIdsList"
                @change="handleChangeSetMealCategory"
              />
            </div>
          </div>

          <div v-for="(v, i) in formData.setMealCategoryList" :key="i">
            <Cell
              v-model="v.excessAmount"
              :title="v.optyCategoryType+'增补选配金额:'"
              placeholder="请输入金额"
              :rules="formRules.excessAmount"
              required
              :right="false"
              is-input
              maxlength="8"
              input-align="right"
              type="digit"
            />
          </div>
          <!-- :prop="`setMealCategoryList[${i}].excessAmount`" -->
          <van-field name="checkbox" label="单品销售" input-align="right">
            <template #input>
              <van-checkbox v-model="formData.isSingleProduct" shape="square" checked-color="#16BC83" :disabled="singleProductDisable" @change="handleChangeSingleProduct" />
            </template>
          </van-field>
          <div v-if="formData.isSingleProduct">
            <div class="category-title">品类选择</div>
            <div class="category-select">
              <LabelSelect
                v-model="singleItemCategoryIdsList"
                :option-data="checkData"
                label-name="optyCategoryType"
                value-name="optyCategoryId"
                multiple
                :excludes="setMealCategoryIdsList"
                @change="handleChangeSingleCategory"
              />
            </div>
          </div>

          <div v-for="(v, i) in formData.singleItemCategoryList" :key="i">
            <Cell
              v-model="v.singleItemAmount"
              :title="v.optyCategoryType+'销售总额:'"
              placeholder="请输入金额"
              :rules="formRules.singleItemAmount"
              :right="false"
              is-input
              maxlength="8"
              input-align="right"
              type="digit"
            />
          </div>
        </div>
      </div>
    </van-form>
  </div>
</template>
<script>
import Cell from '@/components/ListCell'
import LabelSelect from '@/components/LabelSelect'
import { confirmScheme } from '@/apis/optyCategory'
import { bus } from '@/utils/bus'

const validatorNumber = (v) => {
  if (/^([1-9][0-9]*)$/.test(v)) {
    return true
  } else {
    return '只能包含数字'
  }
}
export default {
  name: 'ConfirmScheme',
  components: { Cell, LabelSelect },
  data() {
    return {
      headHeight: 50,
      formData: {
        optyId: null,
        isPackage: false, // 是否套餐
        isSingleProduct: false, // 是否单品
        setMealCategoryList: [], // 套餐品类
        setmealSaleAmount: '', // 套餐总价
        singleItemCategoryList: [] // 单品品类
      },
      setMealCategoryIdsList: [], // 套餐销售选中品类
      singleItemCategoryIdsList: [], // 单品销售选中品类
      setMaleDisable: false, // 套餐销售是否禁用
      singleProductDisable: false, // 单品销售是否禁用
      formRules: {
        setmealSaleAmount: [
          { required: true, message: '请输入套餐总价' },
          { required: false, validator: validatorNumber }
        ],
        excessAmount: [{ required: false, validator: validatorNumber }],
        singleItemAmount: [{ required: false, validator: validatorNumber }]
      },
      checkData: [],
      submiting: false,
      isHaveSetmealSaleAmount: false
    }
  },
  computed: {

  },
  created() {
    const { data = [], optyId, setmealSaleAmount } = this.$route.params
    this.checkData = data

    this.$set(this.formData, 'optyId', optyId)
    if (setmealSaleAmount) {
      this.isHaveSetmealSaleAmount = true
      this.$set(this.formData, 'setmealSaleAmount', setmealSaleAmount)
    }
  },
  methods: {
    handleHeadHeight(h) {
      this.headHeight = h
    },
    // 套餐销售 数据变更
    handleChangeSetMeal(data) {
      if (!data) {
        this.$set(this, 'setMealCategoryIdsList', [])

        this.$set(this.formData, 'setMealCategoryList', [])
        this.$set(this.formData, 'setmealSaleAmount', '')
        this.singleProductDisable = false
      }
    },
    // 套餐销售 品类数据变更
    handleChangeSetMealCategory(data) {
      this.$set(this.formData, 'setMealCategoryList', data)
      const { isPackage, setMealCategoryList } = this.formData
      if (isPackage && setMealCategoryList.length === this.checkData.length) {
        this.singleProductDisable = true
        this.$set(this.formData, 'isSingleProduct', false)
        this.$set(this.formData, 'singleItemCategoryList', [])
        this.$set(this, 'singleItemCategoryIdsList', [])
      }
      if (setMealCategoryList.length !== this.checkData.length && this.singleProductDisable) {
        this.singleProductDisable = false
      }
    },
    // 单品销售 数据变更
    handleChangeSingleProduct(data) {
      if (!data) {
        this.$set(this, 'singleItemCategoryIdsList', [])
        this.$set(this.formData, 'singleItemCategoryList', [])
        this.setMaleDisable = false
      }
    },
    // 单品销售 品类数据变更
    handleChangeSingleCategory(data) {
      this.$set(this.formData, 'singleItemCategoryList', data)

      const { isSingleProduct, singleItemCategoryList } = this.formData
      if (isSingleProduct && singleItemCategoryList.length === this.checkData.length) {
        this.setMaleDisable = true
        this.$set(this.formData, 'isPackage', false)
        this.$set(this.formData, 'setMealCategoryList', [])
        this.$set(this.formData, 'setmealSaleAmount', '')
        this.$set(this, 'setMealCategoryIdsList', [])
      }

      if (singleItemCategoryList.length !== this.checkData.length && this.setMaleDisable) {
        this.setMaleDisable = false
      }
    },
    handleSubmit() {
      if (this.submiting) return
      const { isPackage, isSingleProduct, setmealSaleAmount, setMealCategoryList, singleItemCategoryList } = this.formData

      if (!isPackage && !isSingleProduct) {
        this.$toast('请选择套餐销售,单品销售')
        return
      }
      const reg = /^([1-9][0-9]*)$/
      if (isPackage) {
        if (!setmealSaleAmount) {
          this.$toast('请输入套餐总价')
          return
        }
        if (!reg.test(setmealSaleAmount)) {
          this.$toast('套餐总价只能是大于零的整数')
          return
        }

        if (!setMealCategoryList.length) {
          this.$toast('请选择套餐销售下的品类')
          return
        }

        for (let i = 0; i < setMealCategoryList.length; i++) {
          const v = setMealCategoryList[i]
          if (!v.excessAmount) {
            this.$toast(`请输入${v.optyCategoryType}增补选配金额`)
            return
          }

          if (!reg.test(v.excessAmount)) {
            this.$toast(`${v.optyCategoryType}增补选配金额只能是大于零的整数`)
            return
          }
        }
      }

      if (isSingleProduct) {
        if (!singleItemCategoryList.length) {
          this.$toast('请选择单品销售下的品类')
          return
        }
        for (let i = 0; i < singleItemCategoryList.length; i++) {
          const v = singleItemCategoryList[i]

          if (!v.singleItemAmount) {
            this.$toast(`请输入${v.optyCategoryType}销售总额`)
            return
          }
          if (!reg.test(v.singleItemAmount)) {
            this.$toast(`${v.optyCategoryType}销售总额只能是大于零的整数`)
            return
          }
        }
      }

      this.submiting = true
      confirmScheme(this.formData).then(res => {
        this.submiting = false
        if (res.success === 1) {
          // this.$toast(res.msg || '确认方案成功')
          // // 刷新品类列表
          // this.$nextTick(() => {
          //   this.initOptyCategory(this.detailInfo.id)
          // })

          this.$router.go(-1)
          bus.$emit('refreshCustomerItem', {
            title: '确认方案',
            type: 'confirmScheme'
          })
        }
      }).catch(() => {
        this.submiting = false
      })
    }
  }
}
</script>
<style lang="less" scoped>
.group-title {
  padding: 16px 16px 6px;
  line-height: 18px;
  font-size: 12px;
  color: #888A9C;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.category-title{
  padding: 14px 16px 0;
  height: 32px;
  line-height: 32px;
  font-size: 14px;
  color: #3C4458;
}
.category-select{
  padding: 0 8px;
  background: #fff;
}

.c-cell{
  position: relative;
  padding: 14px 16px;
  min-height: 52px;
  box-sizing: border-box;
  background-color: #fff;
  display: flex;
  align-items: center;
  overflow: hidden;
  &::after{
    position: absolute;
    box-sizing: border-box;
    content: ' ';
    pointer-events: none;
    left:16px;
    right:16px;
    bottom: 0;
    border-bottom: 1px solid #ebedf0;
    -webkit-transform: scaleY(.5);
    transform: scaleY(.5);
  }
  &.no-border::after{
    border-bottom: 0;
  }
  /deep/.van-cell--clickable:active{
    background: #fff;
  }
  /deep/.van-cell{
    padding: 0;
    background: transparent;
    .van-field__label{
      width: auto;
      min-width: 70px;
      margin-right: 16px;
      font-size: 14px;
      color: #3C4458;
    }
    .van-field__control{
      font-size: 14px;
      color: #3C4458;
    }

    &.van-cell--required::before{
      left: -8px;
    }
  }
}
</style>
